<template>
  <div class="app-container">
    <el-form :model="formInline" class="form-inline" ref="form" label-width="70px">
      <el-row :gutter="4">
        <el-col :lg="6" :xl="4"><el-form-item label="保险号" style="width:100%">
            <el-input v-model="formInline.insureNum" placeholder="保险号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="订单编号" style="width:100%">
            <el-input v-model="formInline.orderNum" placeholder="订单编号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="报案号" style="width:100%">
            <el-input v-model="formInline.reportNum" placeholder="报案号"></el-input>
          </el-form-item></el-col>
        <!-- <el-col :lg="9" :xl="7"><el-form-item label="报案时间">
                      <el-date-picker v-model="formInline.user" type="datetimerange" start-placeholder="开始日期"
                          end-placeholder="结束日期" :default-time="['12:00:00']">
                      </el-date-picker>
                  </el-form-item></el-col>
              <el-col :lg="6" :xl="4"><el-form-item style="width:100%" label="当前节点">
                      <el-select v-model="formInline.region" placeholder="当前节点">
                          <el-option label="全部" value="all"></el-option>
                          <el-option label="通过" value="shanghai"></el-option>
                          <el-option label="不通过" value="beijing"></el-option>
                      </el-select>
                  </el-form-item></el-col> -->
        <el-col :lg="6" :xl="4">
          <!-- <el-form-item> -->
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData">
      <el-table-column align="center" prop="reportNum" label="报案号" width="180">
        <template slot-scope="scope">
          {{ scope.row.reportStatus == 2 ? scope.row.reportNum : '' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="goodsName" label="货物名称" width="180">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.goodsName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="containerNumber" label="出险箱号" width="180">
        <template slot-scope="scope">
          {{ scope.row.containerNumber }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="lossFee" label="损失金额">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.lossFee }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sceneName" label="现场联系人">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.sceneName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="scenePhone" label="联系方式">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.scenePhone }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportStatus" label="当前节点">
        <template slot-scope="scope">
          {{ getLabel(ReportStatus, scope.row.reportStatus) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportPlace" label="出险地址">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.reportPlace }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportCause" label="出险原因">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.reportCause }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="explain" label="损失情况说明">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.explain }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="followingClick(scope.row)">跟踪</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="confirmFiling(scope.row)">上传文件/赔付</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <view-or-examine ref="viewOrExamine"></view-or-examine>
    <returnPolicyDialog @initTable="onSubmit" ref="returnPolicyDialog"></returnPolicyDialog>
    <el-dialog title="跟踪" :visible.sync="showFollowing" width="1200px">
      <el-alert v-if="hasFour.length && hasFour[0].successStatus == '1'" :closable="false" title="改案件已回退立案" type="warning">
      </el-alert>
      <div style="padding: 0 30px;">
        <el-steps style="padding-top:50px" :active="stepList.length">
          <el-step v-for="(item, index) in stepList" :key="index" :title="item.label"
            :description="item.time"></el-step>
        </el-steps>
        <el-form style="margin-top: 40px" v-for="(four, index) in hasFour" :key="index">
          <el-form-item :label="`原始文件${index+1}`">
            <div v-for="(item, index) in four.four.lossFiles.split(';')" :key="index"
              style="display:inline-block; position:relative; margin-right:10px">
              <el-image style="width: 100px; height: 100px; " :src="item"
                :preview-src-list="four.four.lossFiles.split(';')">
              </el-image>
            </div>
          </el-form-item>
          <el-form-item :label="`备注${index+1}`">
            {{ four.two.remart }}
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="() => showFollowing = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import returnPolicyDialog from "./returnPolicyDialog.vue";
import { getLabel } from '@/utils/func.js'
import viewOrExamine from './viewOrExamine.vue';
import { ReportStatus } from '@/utils/options'
export default {
  components: { viewOrExamine, returnPolicyDialog },
  data() {
    return {
      showFollowing: false,
      showConfirmFiling: false,
      getLabel,
      ReportStatus,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      currentPage4: 4,
      formInline: {
        insureNum: '',
        orderNum: '',
        reportNum: ''
      },
      tableData: [],
      tableHeight: 0,
      confirmFilingForm: {
        reportNum: ''
      },
      rules: {
        reportNum: [
          { required: true, message: '请输入报案号', trigger: 'blur' },
        ]
      },
      stepList: [],
      reportStatus: 0,
      row: {},
      hasFour: []
    }
  },
  methods: {
    followingClick(row) {
      this.showFollowing = true
      this.stepList = row.frontReportInsureProcesses.map(item => {
        return {
          time: item.createTime,
          label: getLabel(ReportStatus, item.reportStatus)
        }
      })

      this.hasFour = []
      row.frontReportInsureProcesses.forEach((item, index) => {
        if (item.reportStatus == '4') {
          this.hasFour.push({
            four: item,
            two: row.frontReportInsureProcesses[index+1]
          })
        }
      })

      // this.hasFour = row.frontReportInsureProcesses.find(item => item.reportStatus == '4')


      // if (row.frontReportInsureProcesses.length && row.frontReportInsureProcesses[row.frontReportInsureProcesses.length - 1].reportStatus == '2') {
      //   this.hasTwo = row.frontReportInsureProcesses[row.frontReportInsureProcesses.length - 1]
      // }

    },
    confirmFiling(row) {
      this.$refs.returnPolicyDialog.dialogFormVisible = true;
      this.$refs.returnPolicyDialog.row = row;
      this.$refs.returnPolicyDialog.insureUrl = row.insureUrl;
      this.$refs.returnPolicyDialog.form.insureNum = row.insureNum;
    },

    onSubmit() {
      this.page.pageNum = 1
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    view(row) {
      this.$refs.viewOrExamine.dialogFormVisible = true
      this.$refs.viewOrExamine.title = '查看'
      this.$refs.viewOrExamine.row = row;
      this.$refs.viewOrExamine.isExamine = false
    },
    examine() {
      this.$refs.viewOrExamine.dialogFormVisible = true
      this.$refs.viewOrExamine.title = '审核'
      this.$refs.viewOrExamine.isExamine = true
    },
    setTableHeight() {
      this.$nextTick(() => {
        const queryConditionHeight = this.$refs.form.$el.offsetHeight
        this.tableHeight = (window.innerHeight - queryConditionHeight - 180) + 'px'
      })
    },
    getTableData() {
      const params = {
        ...this.form,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }
      this.$get('warranty/insure/list', params).then(res => {
        this.tableData = res.rows
        this.page.total = res.total

      })
    }
  },
  mounted() {
    this.getTableData()
    this.setTableHeight()
  }
}
</script>
<style scoped lang="scss">
.app-container {
  margin-top: 20px
}

.form-inline ::v-deep {
  width: 100%;

  .el-form-item__label {
    // padding: 0;
  }
}
</style>
